import ImagePreview from "@/components/ImagePreview";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { getResumeList } from "@/lib/api";
import Link from "next/link";
import { Plus, FileText, Sparkles, Eye, Edit, Calendar } from "lucide-react";

export default async function ResumeListPage() {
  const resumeList = await getResumeList();
  return (
    <div className="p-8 flex gap-4">
      <Link href="/resumes/create" className="group">
        <Card className="w-64 h-80 border-2 border-dashed border-gray-300 hover:border-blue-500 hover:shadow-lg transition-all duration-300 bg-gradient-to-br from-blue-50 to-indigo-50 hover:from-blue-100 hover:to-indigo-100 cursor-pointer group">
          <CardHeader className="text-center pb-4">
            <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-200 transition-colors duration-300">
              <Plus className="w-8 h-8 text-blue-600" />
            </div>
            <h3 className="text-xl font-bold text-gray-800 group-hover:text-blue-700 transition-colors duration-300">
              创建新简历
            </h3>
          </CardHeader>
          <CardContent className="text-center space-y-3">
            <div className="flex items-center justify-center space-x-2 text-gray-600">
              <FileText className="w-4 h-4" />
              <span className="text-sm">开始你的专业简历</span>
            </div>
            <div className="flex items-center justify-center space-x-2 text-gray-500">
              <Sparkles className="w-4 h-4" />
              <span className="text-xs">AI 智能生成</span>
            </div>
            <div className="pt-4">
              <div className="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg group-hover:bg-blue-700 transition-colors duration-300">
                立即创建
                <Plus className="w-4 h-4 ml-2" />
              </div>
            </div>
          </CardContent>
        </Card>
      </Link>
      <div className="flex flex-wrap gap-6">
        {resumeList.map((resume) => (
          <Link
            href={`/resumes/${resume.id}`}
            key={resume.id}
            className="group"
          >
            <Card className="w-64 h-80 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-200 hover:border-blue-300 bg-white">
              <div className="relative">
                <div className="w-full h-48 bg-gray-100 overflow-hidden">
                  <ImagePreview
                    width={256}
                    height={192}
                    key={resume.id}
                    src={resume.image}
                    className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="bg-black/50 backdrop-blur-sm rounded-full p-2">
                    <Eye className="w-4 h-4 text-white" />
                  </div>
                </div>
              </div>
              <CardContent className="p-4">
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <h3 className="font-semibold text-gray-800 truncate">
                      简历 {resume.id}
                    </h3>
      
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                      <span className="text-xs text-gray-600">已完成</span>
                    </div>
                    <div className="flex items-center space-x-1 text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                      <Edit className="w-3 h-3" />
                      <span className="text-xs font-medium">编辑</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}
